<template>
    <div class="login">
        <div>
            <form action="">
               <div class="imgbox"><img src="../../../static/icon/ele.png" alt=""></div>
               <div class="ipt1">
                   <input type="text" placeholder="手机号" id="phone">
                   <span class="yzm" @click="yanzheng">获取验证码</span>
               </div>
                <input type="text" placeholder="验证码" id="code">
                <p style="color:#999">新用户登录即自动注册，并表示已同意<span style="color:blue"> 《用户服务协议》</span></p>
                <div>
                    <input type="submit" value="登录" @click="login">
                </div>
                <p style="text-align:center;color:#999">关于我们</p>
            </form>
        
        </div> 
    </div>
</template>

<script>
export default {
    data(){
        return {
            num:""

        }
    },
    created(){
        $("#footer").hide();
    },
    methods:{
        yanzheng(){
               var phoneNum = $("#phone").val();
                var pattern = /^[0-9]{11}$/;
                var result = pattern.test(phoneNum);
                   if (result) {

                    $("#phone").css({
                        "box-shadow": "0px 0px 2px 1px green"
                    })
                    // 准备参数，发送请求
                    this.num = Math.floor(Math.random() * 100000 + 100000);
                    console.log(this.num)
                    
                    function getSmsCode() {
                        var url = "http://sms.tehir.cn/code/sms/api/v1/send?srcSeqId=123&account=" + phoneNum + "&password=121314" + "&mobile=" + phoneNum + "&code=" +this.num + "&time=1";
                        $.ajax({
                            url: url,
                            type: "get",
                            dataType: "json",
                            success: function (result) {
                                if (result.status == 0) {
                                    alert("短信验证码已经发送到您的手机");      
                                } else {
                                    alert("发送失败");
                                }
                                 //  如果请求发送成功，禁用按钮，倒计时 60s
                                //   60s后恢复按钮，并在按钮文本提示"再次发送验证码”
                                $("button").attr("disabled", true);
                                var counter = 60;
                                var timer = setInterval(function () {
                                    counter--;
                                    $("button").text("请在" + counter + "秒内输入验证码");
                                    if (counter == 0) {
                                        $("button").removeAttr()
                                        $("button").text("再次发送验证码");
                                        clearInterval(timer);
                                    }
                                },1000)
                               
                            },
                            error: function (result) {
                                console.log(result.valueOf());
                            }
                        });
                    }
                    // 调用发送请求的函数
                    // getSmsCode();

                } else {
                    $("#phone").css({
                        "box-shadow": "0px 0px 2px 1px red"
                    })
                    alert("格式不正确");
                }

            },
            login(){
               
                //  $().change(function () {
                //       console.log(111)
                if($("#code").val()==this.num){
                  location.href="/"
               }

            // })

            }
            
    }

}

 
           
    
</script>

<style scoped>
form{
    width: 80%;
    margin: 1.875rem /* 30/16 */ auto;
    /* border: 1px solid seagreen; */
}
.imgbox{
    text-align: center;
}
input{
    width: 100%;
    height: 1.875rem /* 30/16 */;
    margin: .625rem /* 10/16 */ 0;
    border-radius:.125rem /* 2/16 */;
    border:  1px solid rgb(216, 214, 214);
}
input[type=submit]{
    background-color: rgb(55, 223, 130);
    border: none;
    color:white;
    font-size: .75rem /* 12/16 */;
   
}
.ipt1{
    position: relative;
}
.yzm{
    position: absolute;
    right:.3125rem /* 5/16 */;
    top:35%;
    color:rgb(197, 197, 197);
}
</style>

